import Module from "@/views/dashboard/data/components/Module";
import bg from "./assets/54.svg";
import icon1 from "./assets/4327.svg";
import icon2 from "./assets/4329.svg";
import icon3 from "./assets/4328.svg";
import icon4 from "./assets/4330.svg";

export default defineComponent({
	name: "NetworksFinancing",
	setup() {
		return () => (
			<Module title={"六网融通"}>
				<div class={"w-full h-full flex flex-col"}>
					<div class={"w-full h-fit flex flex-row justify-around items-center"}>
						<Item></Item>
						<Item></Item>
						<Item></Item>
					</div>
					<div class={"grid grid-cols-2 grid-rows-2 gap-2 mt-4"}>
						<Item1 title={"展示内容一"} icon={icon1}></Item1>
						<Item1 title={"展示内容二"} icon={icon2}></Item1>
						<Item1 title={"展示内容三"} icon={icon3}></Item1>
						<Item1 title={"展示内容四"} icon={icon4}></Item1>
					</div>
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	setup() {
		return () => (
			<div class={"w-[80px] h-[80px] text-white text-center"}>
				<div class={"w-full h-[70px] relative"}>
					<img src={bg} alt="" />
					<div class={"absolute h-fit w-fit top-0 left-0 right-0 bottom-0 m-auto"}>
						<div class={"text-[#39E2F6] text-[26px] leading-[26px]"}>235</div>
						<div class={"text-[13px] leading-[13px]"}>(种)</div>
					</div>
				</div>
				<div class={"text-[13px] h-[13px] leading-[13px]"}>设备类型</div>
			</div>
		);
	}
});

const Item1 = defineComponent({
	name: "Item1",
	props: { title: String, icon: String },
	setup(props) {
		return () => (
			<div class={"w-fit h-fit flex flex-row m-1"}>
				<img class={"w-[38px] h-[38px]"} src={props.icon} alt=""></img>
				<div class={"h-full flex flex-col justify-between items-start ml-1"}>
					<div>{props.title}</div>
					<div class={"text-[18px] text-[#39E2F6]"}>380652</div>
				</div>
			</div>
		);
	}
});
